<template>
  <div class="hot_list">
    <a-list class="demo-loadmore-list" :loading="loading" itemLayout="horizontal" :dataSource="hotList">
      <a-list-item slot="renderItem" slot-scope="item, index">
        <a-list-item-meta>
          <p slot="title" ><span class="span">{{ index+1 }}</span><span>{{ item.appName }}</span></p>
        </a-list-item-meta>
        <div><a-icon type="eye" />{{ item.cnt }}</div>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import { Trend, Ellipsis } from '@/components'
export default {
  name: 'HotList',
  props: ['hotList', 'loadHot'],
  components: {
    Trend,
    Ellipsis
  },
  data () {
    return {
      loading: false
    }
  },
  watch: {
    loadHot: function (val) {
      this.loading = true
      if (this.hotList && this.hotList.length !== 0) {
        setTimeout(() => {
          this.loading = false
        }, 1000)
      } else {
        setTimeout(() => {
          this.loading = false
        }, 1000)
      }
    }
  },
  mounted () {
    if (this.hotList && this.hotList.length !== 0) {
      this.loading = false
    } else {
      this.loading = false
    }
  }
}
</script>
<style lang="less" scoped>
  .hot_list /deep/ .ant-list-item {
    padding:8px 0;
  }
  .hot_list /deep/ .ant-list-item-meta-title{
    margin:0;
  }
  .hot_list /deep/ .anticon-eye{
    margin-right: 5px
  }
  .hot_list{
    p{
      margin:0;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    .span{
      display: inline-block;
      width:18px;
      height: 18px;
      border-radius: 50%;
      background-color: #E6A23C;
      color:#fff;
      text-align: center;
      margin-right:5px;
    }
    span{
      vertical-align: middle;
    }
  }
</style>
